"use client";

import { useState } from "react";
import {
  ChevronRight,
  ChevronDown,
  File,
  Folder,
  Plus,
  Settings,
} from "lucide-react";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { ScrollArea } from "@/components/ui/scroll-area";
import { UserRole } from "@/types/auth";

// 模拟文档数据结构
interface DocItem {
  id: string;
  title: string;
  type: "folder" | "document";
  children?: DocItem[];
}

interface SidebarProps {
  onSelectDocument: (id: string | null) => void;
  selectedDocId: string | null;
  userRole: UserRole;
}

export function Sidebar({
  onSelectDocument,
  selectedDocId,
  userRole,
}: SidebarProps) {
  const [searchQuery, setSearchQuery] = useState("");

  // 模拟文档数据
  const documents: DocItem[] = [
    {
      id: "1",
      title: "产品文档",
      type: "folder",
      children: [
        { id: "1-1", title: "产品规划", type: "document" },
        { id: "1-2", title: "用户手册", type: "document" },
        {
          id: "1-3",
          title: "技术文档",
          type: "folder",
          children: [
            { id: "1-3-1", title: "架构设计", type: "document" },
            { id: "1-3-2", title: "API文档", type: "document" },
          ],
        },
      ],
    },
    {
      id: "2",
      title: "公司制度",
      type: "folder",
      children: [
        { id: "2-1", title: "员工手册", type: "document" },
        { id: "2-2", title: "休假制度", type: "document" },
      ],
    },
  ];

  return (
    <div className='flex flex-col h-full border-r'>
      <div className='p-4 border-b'>
        <h2 className='text-xl font-bold mb-4'>企业知识库</h2>
        <div className='relative'>
          <Input
            placeholder='搜索文档...'
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className='w-full'
          />
        </div>
      </div>

      <ScrollArea className='flex-1 p-4'>
        <DocumentTree
          items={documents}
          onSelectDocument={onSelectDocument}
          selectedDocId={selectedDocId}
          userRole={userRole}
        />
      </ScrollArea>

      {(userRole === "admin" || userRole === "superAdmin") && (
        <div className='p-4 border-t'>
          <Button className='w-full' variant='outline'>
            <Plus className='h-4 w-4 mr-2' />
            新建文档
          </Button>
        </div>
      )}
    </div>
  );
}

interface DocumentTreeProps {
  items: DocItem[];
  level?: number;
  onSelectDocument: (id: string | null) => void;
  selectedDocId: string | null;
  userRole: UserRole;
}

function DocumentTree({
  items,
  level = 0,
  onSelectDocument,
  selectedDocId,
  userRole,
}: DocumentTreeProps) {
  const [expandedFolders, setExpandedFolders] = useState<
    Record<string, boolean>
  >({});

  const toggleFolder = (id: string) => {
    setExpandedFolders((prev) => ({
      ...prev,
      [id]: !prev[id],
    }));
  };

  return (
    <ul className={cn("space-y-1", level > 0 && "ml-4")}>
      {items.map((item) => (
        <li key={item.id}>
          {item.type === "folder" ? (
            <div>
              <button
                onClick={() => toggleFolder(item.id)}
                className='flex items-center w-full hover:bg-accent hover:text-accent-foreground rounded-md p-2 text-sm'
              >
                {expandedFolders[item.id] ? (
                  <ChevronDown className='h-4 w-4 mr-1 shrink-0' />
                ) : (
                  <ChevronRight className='h-4 w-4 mr-1 shrink-0' />
                )}
                <Folder className='h-4 w-4 mr-2 shrink-0' />
                <span className='truncate'>{item.title}</span>
              </button>
              {expandedFolders[item.id] && item.children && (
                <DocumentTree
                  items={item.children}
                  level={level + 1}
                  onSelectDocument={onSelectDocument}
                  selectedDocId={selectedDocId}
                  userRole={userRole}
                />
              )}
            </div>
          ) : (
            <button
              onClick={() => onSelectDocument(item.id)}
              className={cn(
                "flex items-center w-full hover:bg-accent hover:text-accent-foreground rounded-md p-2 text-sm",
                selectedDocId === item.id && "bg-accent text-accent-foreground"
              )}
            >
              <File className='h-4 w-4 mr-2 shrink-0' />
              <span className='truncate'>{item.title}</span>
            </button>
          )}
        </li>
      ))}
    </ul>
  );
}
